<script setup lang="ts">
type PropsState = {
  scroll?: number
}
const props = withDefaults(defineProps<PropsState>(), {
  scroll: 0
})

const show = ref(false)

let oldScroll = 0
// 判断是向上还是向下滚动
watchEffect(() => {
  if (props.scroll > oldScroll) {
    oldScroll = props.scroll
    show.value = true
  } else {
    oldScroll = props.scroll
    show.value = false
  }
})

const router = useRouter()
const handGo = (path: string) => {
  router.push({
    path
  })
}
const handLoading = () => {
  msgUtil.$message.warning('功能开发中')
}
</script>

<template>
  <div class="wrapper">
    <div class="spacer" :class="{ down: show }">
      <ul>
        <li class="norem-li" @click="handGo('/')">
          <!--          <img-->
          <!--            class="home-icon"-->
          <!--            src=""-->
          <!--            alt=""-->
          <!--          />-->
          <img class="home-icon" src="@/assets/logo.png" alt="" />
          首页
        </li>
        <li class="norem-li" @click="handGo('/classify')">分类</li>
        <li class="norem-li" @click="handGo('/user')">角色</li>
        <li class="norem-li" @click="handGo('/tag')">标签</li>
        <li class="norem-li" @click="handGo('/today')">今日更新</li>
      </ul>
      <ul>
        <li class="norem-li" @click="handGo('/selected')">精选</li>
        <li class="norem-li" @click="handLoading">排行榜</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  flex: 1;
  height: 100%;
  overflow: hidden;
  .spacer {
    display: flex;
    flex-flow: column;
    height: 200%;
    transition: all 0.4s cubic-bezier(0.22, 0.58, 0.12, 0.98);
    white-space: nowrap;
  }
  ul {
    flex: 1;
    list-style: none;
    display: flex;
    align-items: center;
    .norem-li {
      padding: 0 12px;
      cursor: pointer;
      transition: color 0.1s;
      display: flex;
      align-items: center;
      font-size: 16px;
      .home-icon {
        width: 20px;
        height: 20px;
        margin-right: 7px;
      }
      &:hover {
        color: var(--n-color);
      }
    }
  }
  .down {
    transform: translateY(-50%);
  }
}
</style>
